<script setup>
import browser from './browser/index.js'
import {ref,onMounted, onUnmounted,provide } from 'vue';
const isMobile = browser.mobile;
const isPortrait = ref(window.innerWidth < window.innerHeight) ;
provide('isMobile', isMobile);
const handleResize = ()=>{
  isPortrait.value = window.innerWidth < window.innerHeight;
}
const handleOrientationChange = () => {
  if (window.orientation === 180 || window.orientation === 0) {
    // 竖屏
    
    // 在这里执行竖屏时需要的操作
  } else if (window.orientation === 90 || window.orientation === -90) {
    // 横屏
    isPortrait.value =false;
    // 在这里执行横屏时需要的操作，比如旋转页面等
  }
};

const onBridgeReady = () =>{
   WeixinJSBridge.call('hideToolbar');
}
 


onMounted(()=>{
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }else if (document.attachEvent){
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
}else{
    onBridgeReady();
}

  window.addEventListener('resize', handleResize);
  window.addEventListener('orientationchange', handleOrientationChange);
})
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  window.removeEventListener('orientationchange', handleOrientationChange);
});

</script>

<template>
  <router-view></router-view>
  <!-- <div class="shade" v-if="isMobile&&isPortrait">
    <img src="./assets/hint.png" alt="" class="hint_img">
    <p>请打开屏幕自动旋转，进行横屏浏览</p>
  </div> -->
</template>

<style lang='scss' scoped>
  .shade {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    flex-direction: column;
    .hint_img {
      
    }
    p {
      color:#fff;
      text-align:center;
      font-size:5vw;
    }
  }
</style>
